/*
 * @Author: jiu yin
 * @Date: 2024-05-08 18:26:46
 * @LastEditTime: 2024-06-26 15:07:28
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\pico\index.tsx
 * jiu
 */
import { useEffect, useState, useRef } from "react";

import { devices_list, seat_balance, update_devices_info } from "@/api/home";
import PicoListCom from "@/comment/PicoList";
import { useRoute } from "@/hooks";
import { addSocketNotify, removeSocketNotify, socket } from "@/utils/webSocket";
import AddModal from "./component/AddModal";
import "./index.scss";
import { Tabs, message } from "antd";
export default function index() {
	const { push } = useRoute();
	//1 正常空闲 2  正常使用 3 正常停用 4 异常 5 异常终止托管 6离线

	let [isRequest, setIsRequest] = useState(false);
	let [devices_list_data, set_devices_list_data] = useState<any>([]);
	let [params, set_params] = useState({ status: 0 } as any);
	//席位
	let [seat_balance_data, set_seat_balance_data] = useState<any>({});
	useEffect(() => {
		devices_list(params).then((res: any) => {
			set_devices_list_data(res.data.data);
		});
		//席位
		seat_balance().then((res: any) => {
			set_seat_balance_data(res.data);
		});
	}, [isRequest, params.status]);
	const itemActive = (item: any) => {
		console.log(item);
		push("/pico/pico_detail?device_real_sn=" + item.device_real_sn);
	};

	//添加
	let [isModalOpen, setIsModalOpen] = useState(false);
	const reload = () => {
		setIsRequest(!isRequest);
	};
	let query_list = useRef([]);
	const addClick = () => {
		socket.send(JSON.stringify({ action: "api/query/list" }));
		addSocketNotify("api/query/list/2", async (msg: any) => {
			if (msg.action != "api/query/list") return;
			removeSocketNotify("api/query/list/2");
			console.log(msg.payload);

			if (msg.code == 1000) {
				query_list.current = msg.payload;
				setIsModalOpen(true);
			} else {
				message.error("获取设备信息失败");
			}
		});
	};

	//菜单
	const items = [
		{
			label: `全部( ${seat_balance_data.all} )`,
			key: "0",
		},
		{
			label: `使用中( ${seat_balance_data.normal_use} )`,
			key: "2",
		},
		{
			label: `当前空闲( ${seat_balance_data.normal_idle} )`,
			key: "1",
		},
		{
			label: `离线( ${seat_balance_data.offline} )`,
			key: "6",
		},
		{
			label: `停用( ${seat_balance_data.normal_stop} )`,
			key: "3",
		},
		{
			label: `异常( ${seat_balance_data.abnormal} )`,
			key: "4",
		},
	];

	const onChangeTab = (key: string) => {
		set_params({ ...params, status: Number(key) });
	};

	return (
		<div className="base_bg_fff">

			<section className="w-240px controlBg1 h-95px  cursor-pointer" onClick={() => addClick()}>
				<div className="flex justify-center  pt-28px  ">
					<div className="controlIcon1 w-24px h-24px"></div>
					<p className="c-#373B96 text-20px font-700 ml-14px">添加设备</p>
				</div>
			</section>

			<Tabs
				defaultActiveKey="0"
				items={items}
				onChange={onChangeTab}
				tabBarExtraContent={
					<div className="flex items-center ">
						<p className="c-#9697A9 text-14px">
							终止托管的设备:<span className="text-16px font-700 c-#161940 ml-8px">{seat_balance_data.dead}</span>
						</p>
						<p className="c-#9697A9 text-14px ml-20px">
							当前剩余席位:<span className="text-16px font-700 c-#161940 ml-8px">{seat_balance_data.seat_balance}</span>
						</p>
					</div>
				}
			/>

			{/* 正常 */}
			<PicoListCom itemActive={itemActive} list={devices_list_data}></PicoListCom>

			{isModalOpen && <AddModal isModalOpen={[isModalOpen, setIsModalOpen]} reload={reload} query_list={query_list.current} />}
		</div>
	);
}
